<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-left: 20px">
      <div>
        430污水处理站-水质检测-430V002
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px" style="margin-top: 20px;">
        <el-form-item label="化验时间" prop="userName">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否合格" prop="userName">
          <el-select v-model="queryParams.isHg" placeholder="请选择">
            <el-option
              v-for="item in hgType "
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh-right" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>


      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="handleQuery" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
          <el-button size="mini" circle icon="el-icon-search" @click="showSearch=!showSearch" />
        </el-tooltip>
      </div>
    </el-row>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="化验数据" name="first"></el-tab-pane>
      <el-tab-pane label="数据分析" name="second"></el-tab-pane>
    </el-tabs>
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column type="selection" width="60" align="center" />
          <el-table-column label="化验品类" align="center" width="120" prop="className" :show-overflow-tooltip="true" />
          <el-table-column label="取样时间" align="center" prop="createTime" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否合格" align="center" prop="postion" width="120" >
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.isHg==='合格'">合格</el-tag>
              <el-tag type="error" v-else>不合格</el-tag>
            </template>
          </el-table-column>
<!--          <el-table-column label="化验数据" align="center"  >-->
<!--            <el-table-column v-for="(th, key) in projectList" :key="key" :prop="th.prop"-->
<!--                             :label="th.projectName" align="center"-->
<!--                            >-->
<!--            </el-table-column>-->
<!--            <el-table-column v-for="(th, key) in tableColumns" :key="key" :prop="th.prop"-->
<!--                             :label="th.label" :align="th.align"-->
<!--                            >-->

<!--            </el-table-column>-->
<!--          </el-table-column>-->
          <el-table-column label="SS（mg/l）≤200" align="center" prop="postionNumber"  />
          <el-table-column label="COD（mg/l）≤2300" align="center" prop="sn" width="120" />
          <el-table-column label="BOD（mg/l）≤1000" align="center" prop="hySn" width="120" />
          <el-table-column label="pH值6~9" align="center" prop="jySn" width="120" />
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          @pagination="getList"
        />

   
  </div>
</template>

<script>
  import {
    getTestReport,getTestDetail
  } from "@/api/system/regime";


  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "User",
    components: { Treeselect },
    data() {
      return {
        hyDialog:false,
        activeName: 'first',
        tableColumns: [
          {
            id: 1,
            label: '岗位编号',
            prop: 'id',
            align: 'center',
            disabled: true,
            visible: true,
            hyData:12
          },
          {
            id: 2,
            label: '岗位编码',
            prop: 'id',
            align: 'center',
            disabled: true,
            visible: true,
            hyData:12
          },
          {
            id: 3,
            label: '岗位名称',
            prop: 'name',
            align: 'center',
            disabled: false,
            visible: true,
          },
          {
            id: 4,
            label: '岗位排序',
            prop: 'sort',
            align: 'center',
            disabled: false,
            visible: true,
          },
          {
            id: 5,
            label: '状态',
            prop: 'status',
            align: 'center',
            disabled: false,
            visible: true,
          },
          {
            id: 6,
            label: '创建时间',
            prop: 'createTime',
            align: 'center',
            disabled: false,
            visible: true,
            width: 180
          },
        ],
        hyType:[
          {id:'产品',label:'产品'},
          {id:'原料',label:'原料'},
          {id:'中间品',label:'中间品'},
          {id:'其它',label:'其它'},
        ],
        hgType:[
          {id:'合格',label:'合格'},
          {id:'不合格',label:'不合格'},
        ],
        openPic:false,
        selectData:{},
        picTitle:'',
        picInfo:[],
        // 遮罩层

        loading: true,
        detailTitle:'',
        openDetail:false,
        userId:"",
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        forms:{},
        // 用户表格数据
        userList: null,
        // 弹出层标题
        title: "",
        // 机构名称树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        // 机构名称
        name: undefined,
        // 默认密码
        initPassword: undefined,
        //分配应用对话狂
        openApplication:false,
        //分配权限对话狂
        openProcess:false,
        projectList:[],
        // 日期范围
        dateRange: [],
        // 状态数据字典

        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "name"
        },

        tableData: [],


        // 查询参数
        queryParams: {
          current: 1,
          size: 10,
          unitName:"",
          className:"",
          classType:"",
          isHg:"",
          sn:'',
          jySn:"",
          hySn:""
        },
        // 显示搜索条件
        showSearch: true
      };
    },
    created() {
      this.getList();
      this.getInfo();
    },

    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      /** 查询用户列表 */
      getInfo(){
        let queryParams={
          taskId:20520
        };
        getTestDetail(JSON.stringify(queryParams)).then(response => {
          this.projectList=response;
          this.projectList.forEach((item,index)=>{
            item.prop='hyData';
          })
        })
      },
      getList() {
        this.loading = true;
        getTestReport(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.tableData = response.data;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },

      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      showDetail(data){
        this.hyDialog=true;
        this.selectData=data;
        debugger;
        let queryParams={
          taskId:data.taskid
        };
        debugger;
        getTestDetail(JSON.stringify(queryParams)).then(response => {
          this.projectList=response;
        })
      }

    }
  };
</script>
